<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1','2','3','4']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-caret-right"></i>活动管理</template><!--人员管理-->
            <el-menu-item-group>
              <router-link to="/user/profile">
                <el-menu-item index="1-1">
                  发布活动
<!--                  添加人员-->
                </el-menu-item></router-link>
              <router-link to="/user/userList">
                <el-menu-item index="1-2">
                  活动信息
<!--                  人员信息-->
                </el-menu-item></router-link>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-caret-right"></i>菜品内容</template>
            <el-menu-item-group>
              <router-link to="/content/product">
                <el-menu-item index="2-1">
                  菜品管理
<!--                  产品管理-->
                </el-menu-item></router-link>
              <router-link to="/content/UEditor">
                <el-menu-item index="2-2">
                  菜品上架
<!--                  产品上传-->
                </el-menu-item></router-link>

            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-caret-right"></i>地址设置</template>
            <el-menu-item-group>
              <router-link to="/content/suggestion">
                <el-menu-item index="3-1">地址管理<!--用户建议-->
                </el-menu-item></router-link>
              <router-link to="/content/reset">
                <el-menu-item index="3-2">添加地址<!--用户建议-->
                </el-menu-item></router-link>


            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title"><i class="el-icon-caret-right"></i>用户反馈</template>
            <el-menu-item-group>
              <router-link to="/content/chat">
                <el-menu-item index="4-1">
                  用户聊天
                </el-menu-item></router-link>

            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container class="container">
        <el-header style="text-align: right; font-size: 12px">
         <span class="company"> 订餐后台系统 </span>
          <span> 欢迎您：{{ userName }}</span>
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <router-link to="/">
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </router-link>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
          <el-main>
              <router-view />
          </el-main>
      </el-container>
    </el-container>


  </div>
</template>

<script>
  export default {
    props: ['name'],
    name: "Main",
    data(){
      return{
        userName:this.name
      }
    },mounted() {
      this.$router.replace('/content/product')
    },
    methods:{
      logout(){
        this.$store.commit("login",false)
        console.log(this.$store.state.count)
      }
    }
  }
</script>

<style scoped lang="scss">
  .el-header {
    /*background-color: #B3C0D1;*/
    color: #333;
    line-height: 60px;
    border-bottom: solid 1px #e6e6e6;
  }

  .el-aside {
    color: #333;
  }
  .el-main{
  }
  .router-link-active {
    text-decoration: none;
    color: #00a0e9;
  }
  a {
    text-decoration: none;
    color: #646464;
  }
  .el-aside {
    /*display: block;*/
    position: fixed;
    /*overflow-y: auto;*/
    /*background-color: #324157 !important;*/
  }

  .container{
    margin-left: 16%;
    /*margin-top: 0;*/
    /*width: 50%;*/
  }
  .company{
    padding-right: 30%;
    font-size: 30px;
  }
</style>
